@import "../../sass/themes/base";
@import "../../sass/mixins/base";
@import "../../sass/mixins/form";
@import "../../sass/mixins/button";

$pagination-prefix: #{'.' + $css-prefix + 'pagination-'};

#{$pagination-prefix}wrap{
  display: flex;
  flex-direction: row;
  flex: auto;
  padding: 10px 0;
  font-size: 13px;
  color: $grayer;
  line-height: 24px;
  .error-info{
    font-size: 12px;
    color: $danger-color;
  }
  .#{$css-prefix}pagination,
  #{$pagination-prefix}total,
  #{$pagination-prefix}change-size,
  #{$pagination-prefix}quick-jumper{
    flex: 0 0 auto;
  }

  .#{$css-prefix}pagination{
    padding-left: 10px;
    .page-item{
      padding: 2px 7px 3px;
      cursor: pointer;
      line-height: 1em;
      text-align: center;
      @include text-ellipsis();
      &.page-disable{
        color: $lighterGray;
        cursor: not-allowed;
      }
      &.page-current{
        border-radius: 3px;
        background-color: $primary-color;
        color: #fff;
        cursor: default;
      }
      &.page-point{
        cursor: default;
      }
    }
  }

  #{$pagination-prefix}change-size{
    padding-right: 10px;
    select{
      @include input(24px);
      width: auto;
    }
  }

  #{$pagination-prefix}quick-jumper{
    input{
      @include input(24px);
      width: 50px;
    }
    span{
      @include button($primary-color, #fff, $primary-color);
      @include button-size(24px);
      padding: 0 10px;
      margin-left: 5px;
    }
  }
}